import { reactive, ref } from 'vue'
import { login } from '@/api/user'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default function useLogin () {
  const store = useStore() // 获取容器实例
  const router = useRouter() // 获取路由实例

  // 这里写组合式 API
  const user = reactive({
    email: 'lpzmail@163.com',
    password: '12345678'
  })

  // user = 123 // 没有响应式了

  // ref 包装的响应式数据修改的时候需要通过 value 修改
  const errors = ref({})
  // errors.value = xxx // 有响应式
  // errors = xxx // 没有响应式了

  // 如果是非引用类型数据，一般使用 ref
  // const count = ref('hello') // { value: count, xxx }
  // console.log(count.value)

  const handleLogin = async () => {
    try {
      const { data } = await login(user)
      // 记录用户登录状态
      store.commit('setUser', data.user)
      // 跳转路由
      router.push({ name: 'home' })
      // this.$router.push
    } catch (err) {
      console.log(err.response.data)
      // errors = err.response.data.errors // 重新赋值了一个非响应式的普通数据对象
      // errors = reactive(err.response.data.errors)
      errors.value = err.response.data.errors
    }
  }

  // 这里返回的对象数据，可以直接在任何组件的其它位置被访问，比如模板，methods 等
  return {
    user,
    handleLogin,
    errors
  }
}
